<div class="main comwidth">
  <div class="header">
    演练大厅
    <div class="fr">
      <div class="search-input fl">
        <input class="search" type="text"  [(ngModel)]="searchVal"
        (keydown.enter)="dataListFilter($event)">
        <a (click)="dataListFilter($event)">
          <img src="./assets/img/search.png" alt="">
        </a>
      </div>
      <button nz-button (click)="getEntityList()" [nzLoading]="loadingData" style="padding: 0 5px">
        <i class="anticon anticon-reload"></i>
        <span>刷新</span>
      </button>
    </div>
  </div>
  <nz-spin [nzSpinning]="loadingData" [nzTip]="'加载数据...'">
    <div>
      <div style="margin: auto;" *ngIf="!listEntities.entities || listEntities.entities.length==0">
        <h1 style="margin: 30px; text-align: center;">没有可以参加的演练</h1>
      </div>
      <ul class="case-list" *ngIf="listEntities.entities && listEntities.entities.length>0">
        <li *ngFor="let item of listEntities.entities;let i = index" [class]="'bg-' + getIndex(i)">
          <p>
            {{item.drillSubjectName}}
          </p>
          <div class="case-top">
            <div class="case-list-img">
              <img style="width: 100%;height: 100%" [src]="httpService.IP_PORT+(item.drillSubjectImage?item.drillSubjectImage:'/userfiles/userphotos/timg.jpg')"
                   alt="" srcset="">
            </div>
            <div class="case-list-info">
              <span>剩余角色
                <i>{{item.canSelectRoles}}</i>
              </span>
              <span>创建时间：{{item.createTime|date:'yyyy-MM-dd HH:mm'}}</span>
              <span>房间号：{{item.id}}</span>
              <span>创建人：{{item.createrName}}</span>
            </div>
          </div>
          <div class="case-list-join">
            <a class="join" (click)="canJoinRoom(item.id)">
              加入
            </a>
          </div>
        </li>
        <!-- <li>
              <div class="case-list-img">

              </div>
              <div class="case-list-info">
                  <p>演练主题主题主题 <span>剩余角色 <i>3</i></span></p>
                  <span>创建时间：2018-05-23</span>
                  <span>房间号：00034</span>
                  <span>创建人：李志鹏</span>
              </div>
              <div class="case-list-join">
                  <a  class="join disabled" href="javascript:;">
                      加入
                  </a>
              </div>
          </li> -->
      </ul>
    </div>
    <nz-pagination style="float: right;" [(nzPageIndex)]="listEntities.currentPageIndex" [(nzPageSize)]="listEntities.pageSize" [nzTotal]="listEntities.recordTotalCount"
      (nzPageIndexChange)="getEntityList()" nzShowTotal></nz-pagination>
  </nz-spin>
</div>
